<template>
	<view>
		<view style="display: flex;align-items: center;border-bottom: 2rpx solid #e9e9e9;margin-top: 1vh;">
			<view
				style="width: 3vw;height: 3vw;flex-shrink: 0; border-radius: 50%;background-color: #5d9cec;color: #fff;display: flex;align-items: center;justify-content: center;font-weight: bolder;">
				{{currentinfo.SortNum}}
			</view>
			<view
				style="width: calc(100% - 3vw);margin-left: 2vw;display: flex;align-items: center;justify-content: space-between; font-weight: bolder;">
				<view style="" :style="{
					fontSize:baseFSZ/20+'vw'
				}"> <text style="margin-right: 1vw;flex-shrink: 0;">({{currentinfo.Score}}分)</text>
					<text v-html="replaceImagePlaceholders(currentinfo.QuestionStem,currentinfo.ImageUrl).fresultStem">
					</text>
					<text style="color: red;font-weight: bolder;"
							v-if="String.fromCharCode(65 + chooseIndex)!='@'">{{String.fromCharCode(65 + chooseIndex)}}</text>
								</view>
			

	
				<view
					style="display: flex;flex-direction: column;align-items: center;height: 10vh;justify-content: space-around;margin-left: 1vw;">
			
		<image v-if="IsCollect"  src="../static/hsc.png" @click="collect()"  style="width: 26px;height: 26px;flex-shrink: 0;" mode=""></image>
				<image v-else  src="../static/unsc.png" @click="collect()"  style="width: 26px;height: 26px;flex-shrink: 0;" mode=""></image>
		
		<image v-if="!isNoVoice" @click="speak()" src="../static/bf.png"  style="width: 26px;height: 26px;flex-shrink: 0;" mode=""></image>
				<image v-else @click="speak()" src="../static/jy.png"  style="width: 26px;height: 26px;flex-shrink: 0;" mode=""></image>
				</view>
			</view>
		</view>

		<view :style="{
	fontSize:baseFSZ/20+'vw'
		}" style="padding-left: 6vw;font-weight: bolder; width: 100%;box-sizing: border-box;">
			<view style="display: flex;align-items: center;margin-top: 2vh;" @click="handleFill(i,e.Id) "
				v-for="(e,i) in currentinfo.OptionList">
				<view class="normal">
					<view v-if="chooseId==e.Id" class="ac"></view>
				</view>
				<view style="display: flex;align-items: center;">
					{{String.fromCharCode(65 + i)}}.<text style="margin-left: .5vw;" v-html="replaceImagePlaceholders(e.OptionText,e.ImageUrl).fresultStem">
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		SetExamOption,
		Collect
	} from "../api/api.js"


	export default {
		name: "pdt",
		props: ['baseFSZ', 'currentinfo','isNoVoice'],
		data() {
			return {
				chooseId: -1,
				chooseIndex: -1,
				IsCollect: false
			};
		},
		created() {
	

			this.IsCollect = this.currentinfo.IsCollect
	
		},
		mounted() {
			let index = this.currentinfo.OptionList&&this.currentinfo.OptionList.findIndex(e => e.IsCheck)
			if (index != -1) {
				this.chooseIndex = index
				this.chooseId = this.currentinfo.OptionList[index].Id
				console.log(index, this.chooseId)
			}

		},
		methods: {
			 replaceImagePlaceholders(string, imgurl, baseUrl=`http://${uni.getStorageSync('config').ip}:${uni.getStorageSync('config').port}/Files/`) {
			    // 解析 ImageUrl 字符串为数组, 这里用分号分割
				const imageUrls =imgurl.split(';').map(url => url.trim());
							
				// 查找 QuestionStem 中的所有 {ImageX} 占位符
				let resultStem = string;
							
				// 使用正则表达式匹配 {ImageX}
				const imagePlaceholderRegex = /\{Image(\d+)\}/g;
				let match;
				
				while ((match = imagePlaceholderRegex.exec(resultStem)) !== null) {
				    const placeholderIndex = parseInt(match[1], 10) - 1; // 占位符索引从 0 开始
							
				    if (placeholderIndex < imageUrls.length) {
				        // 构建完整的图片URL
				        const fullImageUrl = `${baseUrl}${imageUrls[placeholderIndex]}`;
				        // 替换占位符
				        const imgTag = `<img src="${fullImageUrl}" alt="Image${placeholderIndex + 1}">`;
				        resultStem = resultStem.replace(match[0], imgTag);
				    } else {
				        console.warn(`No matching URL for placeholder ${match[0]}`);
				    }
				}
							
				return {
				    fresultStem: resultStem,
				};
			},


			handleFill(index, oid) {
				SetExamOption(this.currentinfo.Id, oid).then(res => {
					this.chooseIndex = index

					this.chooseId = res.Data[0].Id

				})
			},
			collect() {
				this.IsCollect = !this.IsCollect

				Collect(this.currentinfo.Id, this.IsCollect).then(res => {

			this.$emit('collect',this.IsCollect)
				})
			},
			speak() {

				// #ifdef APP-PLUS

				let text =
					`${this.currentinfo.QuestionStem}${this.currentinfo.OptionList.map((e,i)=>`${String.fromCharCode(65 + i)}${e.OptionText}`)}`
				console.log(text)
				this.$emit('speaker',text)

				// #endif


			}

		}
	}
</script>

<style lang="scss">
	.normal {
		width: 1.6vw;
		height: 1.6vw;
		border-radius: 50%;
		border: 1px solid #bababa;
		position: relative;
		display: flex;
		align-items: center;
		margin-right: 1.6vw;
		justify-content: center;
		flex-shrink: 0;
		.ac {
		flex-shrink: 0;
			width: 1vw;
			height: 1vw;
			border-radius: 50%;
			background: #0075ff;

		}
	}
</style>